<template>
	<view class="noData">
		<!-- :style="isTab?'height:calc(100vh – 104rpx)':'height:100vh'" -->
		<scroll-view :style="isTab?'height:calc(100vh – 104rpx)':'height:100vh'" scroll-y="true" :scroll-top="scrolltop"
			@scrolltolower="onRefresh" @scroll="scroll" @scrolltoupper="scrolltoupper">
			<slot></slot>
			<view class="isPageText" v-if="loading&&!isData &&isPage"
				style="margin: 30rpx 0 0;padding-bottom: 30rpx;">
				{{nextPage?'-- 上滑加载更多 --':' -- 我也是有底线的 --'}}
			</view>

			<view class="content" v-else>	
				<view class="no-data-content">
					<image style="width: 75px;height: 96px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/chat.png" mode=""></image>
					<view>没有会话信息</view>
				</view>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			//没有数据类型
			type: {
				type: String,
				default: "noData" //noData,noSearch,noNet
			},
			//是否有下一页
			nextPage: {
				type: Boolean,
				default: false
			},
			//是否需要分页
			isPage: {
				type: Boolean,
				default: true
			},
			//是否有数据
			isData: {
				type: Boolean,
				default: false
			},
			loading: {
				type: Boolean,
				default: false
			},
			//是否为Tab
			isTab: {
				type: Boolean,
				default: false
			},
			//是否置顶(需要父子传参默认false)
			backtop: {
				type: Boolean,
				default: false
			},
			//没有数据的提示文字
			noDatatext: {
				type: String,
				default: "暂无数据"
			},
			scrolltop: {
				type: Number,
				default: 0.1
			}
		},
		// props: ["type","nextPage","isPage"],
		data() {
			return {
				// scrolltop: 0.1,
				oldscrolltop: 0
			};
		},
		watch: {
			backtop: {
				handler(newval, oldval) {
					console.log("new,old", newval, oldval, "现在应该设置为0");
					// console.log("this.scrolltop1",this.scrolltop);
					this.scrolltop = this.oldscrolltop
					// console.log("this.scrolltop2",this.scrolltop);
					if (newval != oldval) {
						this.$nextTick(() => {
							this.scrolltop = 0
						});
					}
					// console.log("this.scrolltop3",this.scrolltop);
				},
				immediate: true,
				deep: true
			},
		},
		methods: {
			scroll(e) {
				this.oldscrolltop = e.detail.scrollTop
				// console.log("this.oldscrolltop",this.oldscrolltop);
			},
			//刷新数据
			refush() {
				this.$emit("onRefush");
			},
			//上拉刷新
			onRefresh() {
				console.log("滚动到底部了");
				if (this.nextPage) {
					this.$emit("onRefresh");
				}
			},
			scrolltoupper() {
				this.$emit('scrolltoupper')
			}
		}
	};
</script>

<style lang="scss" scoped>
	.noData {

		// max-height: 100vh;
		.isPageText {
			font-size: 14px;
			color: #a0a0a0;
			text-align: center;
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;

		}

		.content {
			display: flex;
			// padding-top: 50px;
			width: 62%;
			margin: auto;
			box-sizing: border-box;
			color: #999;
			text-align: center;
			font-size: 14px;
			line-height: 28px;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.noData-img {
				width: 160px;
				height: 100px;
			}

			.noData-net {
				color: #148df5;
				line-height: 40px;
			}
		}
		.no-data-content{
			position: relative;
			text-align: center;
			height: 500rpx;
			margin-top: 200rpx;
			color: #999;
		}
	}
</style>